<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>首页</title>
    <link rel="stylesheet" href="text/css" href="../css/swiper-bundle.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/page/main.css" />
</head>

<body>
    <div class="page" @vue:mounted="mounted">
        <div class="swiper mySwiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="item of data.bannerList">
                    <img :src="item.img" alt="">
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>

        <div class="banner-box">
            <div class="sort-item" v-for="item of data.sortlist" @click="core.tra.toSortPage(item)">
                <img class="banner-img" :src="item.imgUrl" />
                <span class="banner-title">{{item.text}}</span>
            </div>
        </div>

        <div class="hot-recommed">
            <div class="main-title"> <i class="icon-hot"></i> 推荐景点 </div>

            <div class="box-recommed" id="boxRecommed">

                <div class="item" v-for="(item,index) of data.listRecommed" :key="index"
                    @click="core.tra.toDetail(item)">
                    <!-- @load="loadFinished($event.target,index,1)" @error="loadFinished($event.target,index,0)" -->
                    <img :data-src="item.mainimage" src="../images/default.png" alt="0" />
                    <div class="recomed-info">
                        <span class="title">{{item.scenicname}}</span>
                        <span> <i class="level"> 5A景区</i> <i class="type">人文景观</i></span>
                        <span class="address">{{item.scenicaddress}}</span>
                    </div>
                </div>
            </div>
            <div class="loading_more" id="loadDom" v-if="!data.isFinished"></div>
        </div>
        
    </div>
</body>
<script src="../script/api.js"></script>
<script src="../script/swiper-bundle.min.js"></script>
<script src="../script/common.js"></script>
<script type="module">
    import { createApp } from 'https://le.6gcc.com/app/web/script/pvue.js';

    const APP = () => {
        createApp({
            data: {
                testDisplay: false,
                initAd:false,   // 广告是否初始化成功
                bannerList: [{
                    id: 1,
                    img: '../images/home/banner1.png'
                }, {
                    id: 2,
                    img: '../images/home/banner2.png'
                }, {
                    id: 3,
                    img: '../images/home/banner1.png'
                }],
                sortlist: [
                    {
                        id: 1,
                        text: '合作商家',
                        name: 'business',
                        imgUrl: '../images/home/icon-merchant.png',
                        pageUrl: `./ad.html`
                        // pageUrl: `https://le.6gcc.com/app/web/html/ad.html?m=${new Date().getTime()}`
                    },
                    {
                        id: 2,
                        text: '旅游线路',
                        name: 'travel',
                        imgUrl: '../images/home/icon-route.png',
                        pageUrl: './fans.html'
                    },
                    {
                        id: 3,
                        text: '每日打卡',
                        name: 'check',
                        imgUrl: '../images/home/icon-clock.png',
                    },
                    {
                        id: 4,
                        text: '免费短剧',
                        name: 'play',
                        imgUrl: '../images/home/icon-video.png',
                        pageUrl: ''
                    },
                    {
                        id: 5,
                        text: '酒店推荐',
                        name: 'hotel',
                        imgUrl: '../images/home/icon-hotel.png',
                        pageUrl: ''
                    },
                    {
                        id: 6,
                        text: '在线商城',
                        name: 'mall',
                        imgUrl: '../images/home/icon-store.png',
                        pageUrl: './sort.html'
                    },
                    {
                        id: 7,
                        text: '出行助手',
                        name: 'help',
                        imgUrl: '../images/home/icon-helper.png',
                        pageUrl: ''
                    },
                    {
                        id: 8,
                        text: '邀请好友',
                        name: 'invite',
                        imgUrl: '../images/home/icon-invite.png',
                        pageUrl: ''
                    }
                ],
                listRecommed: [],
                pageIndex: 0,
                pageSize: 10,
                imgArrAll: [],
                heightArr: [0, 0],
                isLoadLen: 0,
                totalNum: 0,
                isFinished: false   // 所有页面是否加载完毕
            },
            onClickSort(item) {

            },
            touchBottom() {
                let loadDom = document.getElementById('loadDom');
                var observer = new IntersectionObserver(([entry]) => {
                    if (entry.isIntersecting) {
                        // 可见 ,加载更多
                        if (this.data.pageIndex > 0 && !this.data.isFinished) {
                            console.log('加载更多');
                            this.getRecommend();
                        }

                    }
                })
                observer.observe(loadDom);
            },
            // 图片懒加载
            loadCurretnImg() {
                let imgAll = this.boxRecommed.querySelectorAll('img');

                let observer = new IntersectionObserver((entrys) => {
                    entrys.forEach((entry) => {
                        if (entry.isIntersecting) {
                            let target = entry.target;
                            if (target.alt == '0') {
                                target.src = target.dataset.src;
                                target.alt = '1';
                                let itemDom = entry.target.parentElement; 
                                this.isImageLoaded(target.src).then((res) => { 
                                    this.loadFinished(itemDom,1)
                                }, (err) => {
                                    this.loadFinished(itemDom,0)
                                });
                            }

                        }
                    })
                })
                imgAll.forEach((imgDom) => {
                    observer.observe(imgDom);
                })
            },
            isImageLoaded(url) {
                return new Promise((resolve, reject) => {
                    var img = new Image();
                    img.onload = function (res) {
                        resolve(res)
                    };
                    img.onerror = function (res) {
                        reject(res);
                    };
                    img.src = url;
                })

            },

            async getRecommend() {

                let param = {
                    page: this.data.pageIndex,
                    pageSize: this.data.pageSize,
                    type: 'index'
                };
                let res = await core.tra.lists(param);
                this.data.listRecommed = [...this.data.listRecommed, ...res.data.list];
                this.data.totalNum = res.data.count;
                this.data.pageIndex += 1;
                let totalPage = Math.ceil(this.data.totalNum / this.data.pageSize);
                if (this.data.pageIndex >= totalPage) {
                    this.data.isFinished = true;
                }
                let maxHeight = Math.max(...this.data.heightArr);
                
                this.boxRecommed.style.cssText += ';padding-top:'+maxHeight+'px';
                this.$nextTick(() => {
                    this.loadCurretnImg();
                })
            },

            loadFinished(itemDom, kind) {

                // 判断是否加载了真实的图片  
                this.data.isLoadLen += 1;
                let imgDom = itemDom.querySelector('img');
                let height = itemDom.querySelector('img').height + itemDom.querySelector('.recomed-info').clientHeight;
                this.data.imgArrAll = { 
                    boxH: kind == 1 ? height + 20 : 200,
                    boxW: itemDom.clientWidth,
                    boxTarget: itemDom
                }
                
                const { boxTarget, boxW, boxH } = this.data.imgArrAll;
                var minH = Math.min.apply(Math.min, this.data.heightArr);
                var minHeightIndex = this.data.heightArr.indexOf(minH);
                
                if (minHeightIndex == 0) {
                    boxTarget.style.cssText = `position: absolute;left:0px;opacity:1;top:${minH}px;height:${boxH}px;`
                } else {
                    boxTarget.style.cssText = `position: absolute;right:0px;opacity:1;top:${minH}px;height:${boxH}px;`
                }
                //高度追加
                this.data.heightArr[minHeightIndex] += boxH;

                var maxH = Math.max.apply(Math.max, this.data.heightArr)
                
                this.boxRecommed.style.cssText+= `;height:${maxH+20}px;padding-top:${maxH}px`;
                let allLen = this.boxRecommed.querySelectorAll('img').length;
                if(this.data.isLoadLen == allLen){
                    this.boxRecommed.style.cssText+= `;padding-top:0px`;    
                }
            },
            mounted() {
                this.boxRecommed = document.getElementById('boxRecommed');
                this.getRecommend();
                this.touchBottom();
                // 1.首页， 启动一秒后实现广告初始化
                setTimeout(()=>{
                    core.ad.bd.init().then((zAd)=>{
                        setTimeout(()=>{
                            core.ad.bd.splash();
                        },5000)
                    })
                },1000)
            }
        }).mount()
    }


    window.apiready = () => {
        $api.fixStatusBar($api.dom('.nav-bar'));
        APP();
        setTimeout(() => {
            swiperImages();
        }, 200);

        api.setStatusBarStyle && api.setStatusBarStyle({
            style: 'dark',
            color: '-'
        });
    }



    function swiperImages() {
        var swiper = new Swiper(".mySwiper", {
            loop: true,
            loopPreventsSlide: true,
            autoplay: true,
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
                renderBullet: function (index, className) {
                    return '<span class="' + className + '"></span>';
                },
            },
        });
    }

</script>


</html>